<template>
  <div class="group-page">
    <div class="header">
      <!-- S 导航 -->
      <nav class="navbar navbar-default navbar-white navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <a @click="homepage"><h3 style="text-align: center">问答首页</h3></a>
          </div>
          <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a @click="homepage">首页</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li>
                <form
                  class="form-inline navbar-form search-form pt-1"
                  action="/ask/search.html"
                  method="get"
                >
                  <input
                    class="form-control"
                    name="q"
                    value=""
                    type="text"
                    id="searchinput"
                    placeholder="搜索问题、话题或文章"
                  />
                </form>
              </li>
              <li class="hidden-xs">
                <div class="py-3 px-2">
                  <a @click="handleClick" class="btn btn-primary">提问</a>
                </div>
              </li>
              <li class="dropdown navbar-userinfo">
                <a
                  href="/index/user/index.html"
                  class="dropdown-toggle"
                  data-toggle="dropdown"
                  >会员<span class="hidden-sm">中心</span> <b class="caret"></b
                ></a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="/index/user/login.html"
                      ><i class="fa fa-sign-in fa-fw"></i> 登录</a
                    >
                  </li>
                  <li>
                    <a href="/index/user/register.html"
                      ><i class="fa fa-user-o fa-fw"></i> 注册</a
                    >
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <!-- E 导航 -->
    </div>
    <div id="myCarousel" class="carousel slide">
      <!-- 轮播（Carousel）指标 -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
      </ol>
      <!-- 轮播（Carousel）项目 -->
      <div class="carousel-inner">
        <div class="item active">
          <img
            src="../assets/images/FtGwK-e2_loRYfPhqlU1e9DMEgXL.jpg"
            alt="Second slide"
          />
        </div>
        <div class="item">
          <img
            src="../assets/images/FsWEEgLtlbI9oFrAQ9dxD5EUrS_a.jpg"
            alt="Third slide"
          />
        </div>
      </div>
      <!-- 轮播（Carousel）导航 -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">
        <span
          _ngcontent-c3=""
          aria-hidden="true"
          class="glyphicon glyphicon-chevron-right"
        ></span
      ></a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
    </div>
    <div class="container" id="mainbody">
      <div class="row asknav">
        <div class="col-xs-4 col-sm-4 text-center">
          <a @click="handleClickquest1"
            ><img src="../assets/images/icon_wuli.png" /><em>小学答疑</em></a
          >
        </div>
        <div class="col-xs-4 col-sm-4 text-center">
          <a @click="handleClickquest2"
            ><img src="../assets/images/icon_lishi.png" /><em>初中答疑</em></a
          >
        </div>
        <div class="col-xs-4 col-sm-4 text-center">
          <a @click="handleClickquest3"
            ><img src="../assets/images/icon_shuxue.png" /><em>高中答疑</em></a
          >
        </div>
      </div>
      <div class="row askrz">
        <div class="col-xs-6 col-sm-6 text-center">
          <button type="button" class="btn btn-primary" @click="handleClickexport">
            认证答疑教师
          </button>
        </div>
        <div class="col-xs-6 col-sm-6 text-center">
          <button type="button" class="btn btn-primary" @click="handleClick">
            马上提问
          </button>
        </div>
      </div>
      <div class="row" id="questionlist">
        <div class="col-md-8 col-sm-12" style="padding: 0 0 80px 0">
          <div class="tab-inner" style="background: #fff; padding: 15px">
            <!-- E 首页问题列表 -->
            <div class="panel-heading">
              <h3 class="panel-title zdy">
                等待教师解答
                <div class="pull-right">
                  <a class="btn btn-link btn-xs" style="font-size: 12px">更多</a>
                </div>
              </h3>
            </div>
            <div class="panel-body" style="padding: 0" v-for="item in list1.value">
              <section class="question-list-item" @click="send(item)">
                <div class="qa-rank">
                  <div class="answers">
                    0
                    <small> 回答</small>
                  </div>
                </div>
                <div class="summary">
                {{ item.title }}
                  <h2 class="title">
                    <a @click="handleClickcontent">
                      <span
                        class="price-tag"
                        data-toggle="tooltip"
                        data-title="如果回答被采纳，回答者将获得30元"
                        ><i class="fa fa-rmb"></i> 30</span
                      >
                      <span
                        style="
                          font-weight: normal;
                          text-decoration: none;
                          color: #inherit;
                        "
                        >{{ item.content }}</span
                      >
                    </a>
                  </h2>
                  <div class="tags">
                    <!--<a class="tag">初中</a>-->
                    <a class="tag">{{ item.grade }}</a>
                    <a class="tag">{{ item.subject }}</a>
                  </div>
                  <!---->
                </div>
              </section>
            </div>
            <div class="panel-heading">
              <h3 class="panel-title zdy">
                小学问题
                <div class="pull-right">
                  <a
                    class="btn btn-link btn-xs"
                    style="font-size: 12px"
                    @click="handleClickcontent"
                    >更多</a
                  >
                </div>
              </h3>
            </div>
            <div class="panel-body" style="padding: 0"  v-for="item in list2.value">
              <section class="question-list-item" @click="send(item)">
                <div class="qa-rank">
                  <div class="answers">
                    0
                    <small> 回答</small>
                  </div>
                </div>
                <div class="summary">
                {{ item.title }}
                  <h2 class="title">
                    <a @click="handleClickcontent">
                      <span
                        class="price-tag"
                        data-toggle="tooltip"
                        data-title="如果回答被采纳，回答者将获得10元"
                        ><i class="fa fa-rmb"></i> 10</span
                      >
                      <span
                        style="
                          font-weight: normal;
                          text-decoration: none;
                          color: #inherit;
                        "
                        >{{ item.content }}</span
                      >
                    </a>
                  </h2>
                  <div class="tags">
                    <!--<a class="tag">小学</a>-->
                    <a class="tag">{{ item.grade }}</a>
                    <a class="tag">{{ item.subject }}</a>
                  </div>
                  <!---->
                </div>
              </section>
             
            </div>
            <div class="panel-heading">
              <h3 class="panel-title zdy">
                初中问题
                <div class="pull-right">
                  <a
                    class="btn btn-link btn-xs"
                    style="font-size: 12px"
                    @click="handleClickcontent"
                    >更多</a
                  >
                </div>
              </h3>
            </div>
            <div class="panel-body" style="padding: 0"  v-for="item in list3.value">
              <section class="question-list-item"  @click="send(item)">
                <div class="qa-rank">
                  <div class="answers">
                    0
                    <small> 回答</small>
                  </div>
                </div>
                <div class="summary">
                  {{ item.title }}
                  <h2 class="title">
                    <a @click="handleClickcontent">
                      <span
                        class="price-tag"
                        data-toggle="tooltip"
                        data-title="如果回答被采纳，回答者将获得30元"
                        ><i class="fa fa-rmb"></i> 30</span
                      >
                      <span
                        style="
                          font-weight: normal;
                          text-decoration: none;
                          color: #inherit;
                        "
                        >{{ item.content }}</span
                      >
                    </a>
                  </h2>
                  <div class="tags">
                    <!--<a class="tag">初中</a>-->
                    <a class="tag">{{ item.grade }}</a>
                    <a class="tag">{{ item.subject }}</a>
                  </div>
                  <!---->
                </div>
              </section>
              
            </div>
            <div class="panel-heading">
              <h3 class="panel-title zdy">
                高中问题
                <div class="pull-right">
                  <a
                    class="btn btn-link btn-xs"
                    style="font-size: 12px"
                    @click="handleClickcontent"
                    >更多</a
                  >
                </div>
              </h3>
            </div>
            <div class="panel-body" style="padding: 0"  v-for="item in list4.value">
              <section class="question-list-item"  @click="send(item)">
                <div class="qa-rank">
                  <div class="answers answered">
                    0
                    <small> 回答</small>
                  </div>
                </div>
                <div class="summary">
                {{ item.title }}
                  <h2 class="title">
                    <a @click="handleClickcontent">
                      <span
                        style="
                          font-weight: normal;
                          text-decoration: none;
                          color: #inherit;
                        "
                        >{{ item.content }}</span
                      >
                    </a>
                  </h2>
                  <div class="tags">
                    <!--<a class="tag">高中</a>-->
                    <a class="tag">{{ item.grade }}</a>
                    <a class="tag">{{ item.subject }}</a>
                  </div>
                  <!---->
                </div>
              </section>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-12 hidden-xs">
          <div class="article-sidebar">
            <!-- S 每日签到 -->

            <!-- E 每日签到 -->
            <div class="panel panel-default recommend-article">
              <div class="panel-heading">
                <h3 class="panel-title">热门文章</h3>
              </div>
              <div class="panel-body"></div>
            </div>
            <!-- E 热门文章 -->

            <!-- S 热门问题 -->
            <div class="panel panel-default hot-article">
              <div class="panel-heading">
                <h3 class="panel-title">热门问题</h3>
              </div>
              <div class="panel-body">
                <div class="media media-number">
                  <div class="media-left">
                    <span class="num">1</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/3.html"
                      title="已传输：3.6 KB 用时 0.37 秒 (9.78 KB/s)."
                      >已传输：3.6 KB 用时 0.37 秒 (9.78 KB/s).</a
                    >
                  </div>
                </div>
                <div class="media media-number">
                  <div class="media-left">
                    <span class="num">2</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/1.html"
                      title="牛吃草作文牛吃草作文牛吃草作文牛吃草作文"
                      >牛吃草作文牛吃草作文牛吃草作文牛吃草作文</a
                    >
                  </div>
                </div>
                <div class="media media-number">
                  <div class="media-left">
                    <span class="num">3</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/2.html"
                      title="公园路口了，感觉有点不舒服了啊哈哈"
                      >公园路口了，感觉有点不舒服了啊哈哈</a
                    >
                  </div>
                </div>
                <div class="media media-number">
                  <div class="media-left">
                    <span class="num">4</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/4.html"
                      title="一只鸭子多少钱，一个样。请吃饭怎么处理？"
                      >一只鸭子多少钱，一个样。请吃饭怎么处理？</a
                    >
                  </div>
                </div>
                <div class="media media-number">
                  <div class="media-left">
                    <span class="num">5</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/6.html"
                      title="测试账号加上测试账号加上"
                      >测试账号加上测试账号加上</a
                    >
                  </div>
                </div>
                <div class="media media-number">
                  <div class="media-left">
                    <span class="num">6</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/5.html"
                      title="cfdasfsdafdsafsdafsd"
                      >cfdasfsdafdsafsdafsd</a
                    >
                  </div>
                </div>
              </div>
            </div>
            <!-- E 热门问题 -->
            <!-- S 热门标签 -->
            <div class="panel panel-default hot-tags">
              <div class="panel-heading">
                <h3 class="panel-title">热门标签</h3>
              </div>
              <div class="panel-body">
                <a href="/ask/tag/1.html" class="tag"> 11111</a>
                <a href="/ask/tag/2.html" class="tag"> 555</a>
                <a href="/ask/tag/3.html" class="tag"> yt</a>
                <a href="/ask/tag/4.html" class="tag"> uy</a>
              </div>
            </div>
            <!-- E 热门标签 -->
            <!-- S 等待解答 -->
            <div class="panel panel-default recommend-article">
              <div class="panel-heading">
                <h3 class="panel-title">等待解答</h3>
              </div>
              <div class="panel-body">
                <div class="media media-number">
                  <div class="media-left">
                    <span class="tag">问</span>
                  </div>
                  <div class="media-body">
                    <a
                      class="link-dark"
                      href="/ask/question/5.html"
                      title="cfdasfsdafdsafsdafsd"
                      >cfdasfsdafdsafsdafsd</a
                    >
                  </div>
                </div>
              </div>
            </div>
            <!-- E 等待解答 -->
            <!-- S 推荐专家 -->
            <div class="panel panel-default panel-users">
              <div class="panel-heading">
                <h3 class="panel-title">推荐专家</h3>
              </div>
              <div class="panel-body">
                <div class="media media-number">
                  <div class="media-left">
                    <a class="link-dark" href="/u/19809" title="15074703968"
                      ><img
                        class="media-object img-circle img-small"
                        alt="15074703968"
                        src=""
                    /></a>
                  </div>
                  <div class="media-body">
                    <div class="media-heading">
                      <a class="link-dark" href="/u/19809" title="15074703968"
                        >15074703968</a
                      >
                    </div>
                    <div class="text-muted">0个答案 0次被采纳</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import {onMounted,ref,reactive} from "vue";
import {content,Primary,Juniorhigh, High,Notanswered} from "../../api/index"
const list1 =reactive([])
const list2=reactive([])
const list3 =reactive([])
const list4=reactive([])
const router = useRouter();
const send=(item)=>{
 localStorage.setItem("key",JSON.stringify(item))
  router.push({path:"/content",query:item})
}
const handleClick = () => {
  router.push("/post");
};
const handleClickquest1 = () => {
  router.push({path: "/questions", query: { id: "1" }});
};
const handleClickquest2 = () => {
  router.push({path: "/questions", query: { id: "2" }});
};
const handleClickquest3 = () => {
  router.push({path: "/questions", query: { id: "3" }});
};
const handleClickexport = () => {
  router.push("/exports");
};
const handleClickcontent = () => {
  router.push("/content");
};
const homepage = () => {
  router.push("/");
};
onMounted(()=>{
  content().then((res)=>{
      console.log(res)
  })
  Notanswered().then((res)=>{
  console.log(res.data.Waitingforanswers)
  list1.value=res.data.Waitingforanswers
 })
  Primary().then((res)=>{
    console.log(res.data.data)
    list2.value=res.data.data
  })
})
 Juniorhigh().then((res)=>{
  console.log(res.data.data)
  list3.value=res.data.data
 })
 High().then((res)=>{
  console.log(res.data.data)
  list4.value=res.data.data
 })
</script>

<style scoped>
@media (max-width: 480px) {
  h3.search-title {
    font-size: 28px;
  }

  form.index-search-form .search-term {
    width: 60%;
  }

  .swiper-recommend .swiper-slide {
    margin-right: 0px;
  }
}

.signin-rank-table > tbody > tr > td {
  vertical-align: middle;
}

.asknav {
  margin: 20px 0 20px 0;
}
.asknav a {
}
.asknav a em {
  display: block;
  font-style: normal;
}

.askrz {
  margin: 20px 0;
}
.askrz button {
  padding: 10px 20px;
  width: 100%;
  font-size: 18px;
}
h3 {
  font-weight: bolder;
}
.zdy {
  font-size: 18px;
  padding: 5px 10px;
}
.nav-tabs {
  text-align: center;
  height: 30px;
  line-height: 30px;
}
.nav-tabs img {
  width: 20px;
  margin: 10px 0 0 0;
  display: block;
}
</style>
